<template>
  <div id="views">
    <section id="sec1">
      <p class="p1">
        <img src="../../common/imgs/danwa.png" alt="">
        <span>{{machine.name}}</span>
      </p>
    </section>
    <div id="content">
      <section id="sec2">
        <p class="p1">
          <span class="s1">单份金额</span>
          <span class="price">
            <span class="s1" v-for="(item , index) in machine.good_deposit" v-if="item.pay_currency === 'CNY'">
              <span class="num">{{Number(item.goods_deposit)}}</span>
              <span class="unit">CNY</span>
            </span>
            <span class="s1" v-for="(item , index) in machine.good_deposit" v-if="item.pay_currency === 'USDT'">
              <span class="num"><span class="before">/</span> {{Number(item.goods_deposit)}}</span>
              <span class="unit">USDT</span>
            </span>
          </span>
        </p>
        <p class="p2">
<!--          <span class="not_return" v-if="machine.type == 10">不可回购</span>-->
          <span>锁定期{{machine.is_regular == 0 ? "30" : machine.regular_date_num}}天</span>
          <span v-if="machine.is_installment == 1" class="fqg">分期购</span>
        </p>
        <div class="d3">
          <div>
            <p>
              <span class="left">最小下单限额</span>
              <span class="right">{{machine.miniTentNum}}{{machine.unit_name}}</span>
            </p>
            <p>
              <span class="left">最大下单限额</span>
              <span class="right">{{machine.maxiTentNum}}{{machine.unit_name}}</span>
            </p>
          </div>
          <div>
            <p>
              <span class="left">剩余算力</span>
              <span class="right">{{machine.leftPowerNum}}{{machine.unit_name}}</span>
            </p>
            <p>
              <span class="left">产出预估</span>
              <span class="right profit">约{{machine.predict_income}} <span class="profitUnit">CNY/T</span></span>
            </p>
          </div>
        </div>
      </section>
      <section id="sec3">
        <p>
          <span class="left">发币方式</span>
          <span class="right">每日结算，次日放至账户</span>
        </p>
        <p>
          <span class="left">分币比例</span>
          <span class="right orange">{{machine.distribution_rate}}%</span>
        </p>
        <p>
          <span class="left">开挖日期</span>
          <span class="right">{{machine.time_income}}</span>
        </p>
        <p>
          <span class="left">算力来源</span>
          <span class="right">{{machine.power_node_name}}</span>
        </p>
      </section>
      <section id="sec4">
        <p>
          <span class="left">基础算力</span>
          <span class="right">{{machine.base_power}}{{machine.unit_name}}</span>
        </p>
      </section>
      <section id="sec5" v-html="machine.desc"></section>
      <section id="submit">
        <a href="javascript:void  0;" class="sub yellowbtn" @click="goRent">
          立即下单
        </a>
      </section>
    </div>
  </div>
</template>
<script>
  import {getMachineDetail, isLogin} from '../../http/api';
  export default {
    name : 'ordinaryDetail',
    data() {
      return {
        machine_id : null,
        machine : {}
      }
    },
    mounted() {
      let machine_id =  this.$route.query.machine_id;
      if(!machine_id){
        require('../../common/js/toast').toast('参数不正确');
        this.$router.go(-1);
        return;
      }
      this.machine_id = machine_id;
      this.loadPage();
    },
    methods : {
      loadPage(){
        let thiz = this;
        getMachineDetail({machine_id : thiz.machine_id}).then(res => {
          if(res.code == 200){
            let getData = res.data;
            let machine = getData.machine;
            machine.miniTentNum = thiz.accMul(machine.base_power, machine.minLimitNum);//最小下单限额
            machine.maxiTentNum = thiz.accMul(machine.base_power,
              (Number(machine.batchLimitNum) < Number(machine.maxLimitNum) ? machine.batchLimitNum : machine.maxLimitNum))
            ;//最大下单限额
            machine.leftPowerNum = thiz.accMul(machine.base_power, machine.productNum);//剩余算力
            machine.predict_income = String(machine.predict_income).replace(/([0-9]+\.[0-9]{0,2})[0-9]*/, "$1");//预估产出
            machine.distribution_rate = thiz.accMul(machine.distribution_rate, 100);//分币比例
            thiz.machine = machine;
          }
        });
      },
      goRent(){
        let thiz = this;
        thiz.$router.push({path: '/place_order' , query : {machine_id : thiz.machine_id}});
        return
        isLogin({noToast : true}).then( res => {
          if( res.code == 200 ){
            thiz.$router.push({path: '/place_order' , query : {machine_id : thiz.machine_id}});
          } else {
            require('../../common/js/toast').toast('该操作需要登录');
            thiz.$router.push({path : '/login'});
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  #views{
    background: #f8f8f8;
    >#sec1{
      height:3rem;background-color: #fae9bb;background-image: -webkit-gradient(linear,left top,right top,from(#fae9bb),to(#fdf8e5));background-image: linear-gradient(90deg,#fae9bb,#fdf8e5);
      padding: .4rem .28rem 0;
      >.p1{
        >img{
          vertical-align: middle;width: 0.3rem;
        }
        >span{
          font-size: 0.3rem;color: #262626;vertical-align: middle;font-family: 'PingFang-SC-Bold';font-weight: 600;
        }
      }
    }
  }
  #content{
    margin-top: -1.95rem;padding: 0 0.28rem;padding-bottom: 1.65rem;
    >section{
      background: #fff;border-radius: 0.04rem;padding: 0.3rem 0.26rem;margin-top: 0.2rem;
    }
    >#sec2{
      margin-top: 0;
      >.p1{
        >.s1{
          color: #898989;font-size: 0.24rem;
        }
        >.price{
          padding-left: 0.1rem;
          >span{
            >.num{
              font-size: 0.4rem;
              >.before{
                font-size: 0.24rem;
              }
            }
            >.unit{
              font-size: 0.2rem;
            }
          }
        }
      }
      >.p2{
        overflow: hidden;
        >span{
          float: left;display: inline-block;height: 0.38rem;line-height: 0.38rem;padding: 0 0.13rem;background: #FDF8EC;font-size: 0.22rem;color: #D89005;
          margin-top: 0.22rem;margin-left: 0.1rem;
          &:first-child{
            margin-left: 0;
          }
        }
        >.not_return{
          color: #F19224;
        }
        >.fqg{
          color: #C2382B;
        }
      }
      >.d3{
        color: #301405;overflow: hidden;padding-top: 0.24rem;
        >div{
          float: left;width: 50%;position: relative;
          &:first-child{
            padding-right: 0.26rem;
            >p>.right{
              color: #301405;font-size: 0.22rem;
            }
            &:after{
              content: '';display: block;width: 0.01rem;height: 100%;background: #EAEAEA;position: absolute;right: 0;top:0;
            }
          }
          &:last-child{
            padding-left: 0.26rem;
          }
          .profitUnit{
            font-size: 0.18rem;
          }
          >p{
            overflow: hidden;
            >.left{
              float: left;font-size: 0.22rem;
            }
            >.right{
              float: right;color: #262626;font-size: 0.22rem;
            }
            &:nth-child(2){
              padding-top: 0.15rem;
            }
            .profit{
              color: #F67311;
            }
          }
        }
      }
    }
    #sec3{
      >p{
        overflow: hidden;padding-top: 0.22rem;
        &:first-child{
          padding-top: 0;
        }
        >.left{
          color: #999999;font-size: 0.28rem;float: left;
        }
        >.right{
          float: right;font-size: 0.28rem;color: #262626;
        }
        >.orange{
          color: #F67311;
        }
      }
    }
    #sec4{
      >p{
        overflow: hidden;padding-top: 0.22rem;
        &:first-child{
          padding-top: 0;
        }
        >.left{
          color: #999999;font-size: 0.28rem;float: left;
        }
        >.right{
          float: right;font-size: 0.28rem;color: #262626;
        }
      }
    }
    #sec5{
      padding-top: 0;
      /deep/ img{
        width: 100%;
      }
    }
    #submit{
      background: #f8f8f8;position: fixed;padding: 0.38rem 0.26rem;z-index: 1;width: 100%;left: 0;bottom: 0;margin-top: 0;
      >a{
        display: inline-block;width: 100%;height: 0.8rem;line-height: 0.8rem;border-radius: 0.04rem;margin-top: 0;
      }
    }
  }
  @media screen and (min-width: 1025px){
    #content #submit{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
</style>
